<template>
 <div class="login">
   <!-- 主体 -->
    <div class="login-container">
      <!-- 图片 -->
      <div class="img">
         <img src="../../assets/login.png" alt="">
      </div>
      <!-- 登录表单 -->
      <div class="login-from">
         <div class="login-from-box">
            <div class="title">用户登录</div>
            <el-form 
               :model="user"
               :rules="rules"
               label-width="auto"
               style="max-width: 600px"
               ref="loginFromRef"
               @Submit="handleLogin"
            >
               <el-form-item label="账号" class="username" prop="username">
                  <el-input 
                     v-model="user.username"
                     placeholder="请输入账号"
                  />
               </el-form-item>
               <el-form-item label="密码" prop="password">
                  <el-input 
                     v-model="user.password"
                     type="password"
                     placeholder="请输入密码" 
                     show-password
                  />
               </el-form-item>

               <el-form-item>
                  <el-checkbox v-model="user.remember" name="type">
                     记住账号和密码
                  </el-checkbox>
               </el-form-item>

               <el-form-item>
                  <el-button 
                     type="primary"
                     class="btn"
                     native-type="submit"
                  >登录</el-button>
               </el-form-item>
            </el-form>
         </div>
      </div>
    </div>
 </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import CryptoJS from 'crypto-js'
import { ElMessage, type FormRules } from 'element-plus'
import useUserStore from '@/store/user'

const router = useRouter()
const userStore = useUserStore()

// 加密钥使用到的密钥
const secret = 'fsaf44545afd415f46'

// 账号信息
const user = ref<ILoginAccount>({
   username: '',
   password: '',
   remember: false
})

// 如果本地有保存记住用户账号信息,则读取出该账号信息,进行解密还原到表单中
const load = () => {
   // 读取本地保存的账号信息
   const account = localStorage.getItem('account')
   if(account){
      const origin = CryptoJS.AES.decrypt(account, secret).toString(CryptoJS.enc.Utf8)
      // 使用=将明文数据进行分割
      const [username, password] = origin.split('=')
      user.value = {
         username,
         password,
         remember: true,
      }
   }
}
load()

// 表单字段验证规则
interface RuleForm {
   username: string
   password: string
}
// 表单字段信息
const rules = ref<FormRules<RuleForm>>({
   username: [
      { required: true, message: '请输入账号!', trigger: 'blur'  }
   ],
   password: [
      { required: true, message: '请输入密码!', trigger: 'blur'  },
      { min: 5, max: 18, message: '密码长度在6到18位!', trigger: 'blur' },
   ]
})

// 引入表单登录实例
const loginFromRef = ref<any>()
// 登录
const handleLogin = async(event: any) => {
   event.preventDefault()
   //console.log('登录')
   try {
      const result = await loginFromRef.value.validate()
      // console.log(result)
      // 如果登录成功
      if(result){
      const {success, message} = await userStore.loginAction(user.value)
         if(success){
            // 登录判断用户是否记住密码
            if(user.value.remember){
               const account = user.value.username + '=' + user.value.password
               // 将待保存到本地用户账号数据进行加密
               const pass = CryptoJS.AES.encrypt(account, secret).toString()
               // 将加密后的数据保存到本地
               localStorage.setItem('account', pass)
            }else{
               localStorage.removeItem('account')
            }
            ElMessage({
               showClose: true,
               message: '登录成功',
               type: 'success',
            })
            router.push('/dashboard')
         }else{
            ElMessage({
               showClose: true,
               message,
               type: 'error',
            })
         }
      }
   } catch (error) {
      console.log('异常:', error)
   }
}


</script>

<style lang='scss' scoped>
.login{
   display: flex;
   height: 100vh;
   background-color: #F6F6F6;
   &-container{
      display: flex;
      width: 1000px;
      height: 500px;
      margin: auto;
      background-color: #fff;
      .login-from{
         width: 500px;
         .login-from-box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .title{
               font-size: 24px;
               font-weight: 500;
               margin-top: 40px;
               margin-bottom: 50px;
            }
            .username{
               width: 346px;
            }
         }
      }
   }
   .btn{
      width: 346px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      border: none;
   }
}
</style>
